<template>
    <PageView>
        <vxe-form title-colon
                  :valid-config="{theme: 'normal'}"
                  @reset="resetFormData">

            <!-- 开始日期 -->
            <vxe-form-item span="4" title="开始日期" field="startDateTime" :item-render="{}">
                <template #default>
                    <vxe-input v-model="processDeploymentComponentStore.formData.startDateTime"
                               placeholder="选择日期"
                               type="datetime"/>
                </template>
            </vxe-form-item>

            <!-- 结束日期 -->
            <vxe-form-item span="4" title="结束日期" field="endDateTime" :item-render="{}">
                <template #default>
                    <vxe-input v-model="processDeploymentComponentStore.formData.endDateTime"
                               placeholder="选择日期"
                               type="datetime"/>
                </template>
            </vxe-form-item>

            <vxe-form-item span="4" title="部署名称" field="deploymentName" :item-render="{}">
                <template #default>
                    <vxe-input v-model="processDeploymentComponentStore.formData.deploymentName"
                               placeholder="请输入部署名称"/>
                </template>
            </vxe-form-item>

            <!-- 查询按钮 -->
            <vxe-form-item collapse-node :item-render="{}">
                <template #default>
                    <vxe-button icon="vxe-icon-search"
                                type="submit"
                                status="primary"
                                content="查询"
                                @click=""/>
                    <vxe-button icon="vxe-icon-repeat" type="reset" content="重置"/>
                </template>
            </vxe-form-item>
        </vxe-form>

        <!-- 表格的工具栏 -->
        <vxe-toolbar ref="toolbarRef" custom/>

        <!-- 表格 -->
        <vxe-table
            ref="tableRef"
            border
            stripe
            empty-text="暂无数据"
            min-height="300"
            :loading="processDeploymentComponentStore.tableLoading"
            :column-config="{resizable: true}"
            :row-config="{isHover: true}"
            :data="processDeploymentComponentStore.tableDataList">
            <vxe-column field="deploymentTime" title="部署时间" min-width="100px" show-overflow/>
            <vxe-column field="name" title="部署名称" min-width="100px" show-overflow/>
            <vxe-column field="deploymentId" title="部署 ID" min-width="100px" show-overflow/>
            <vxe-column field="tenantId" title="租户 ID" min-width="100px" show-overflow/>
            <vxe-column field="source" title="部署来源" min-width="100px" show-overflow/>
        </vxe-table>

        <!-- 分页导航栏 -->
        <vxe-pager
            style="margin-top: 10px"
            align="right"
            v-model:currentPage="processDeploymentComponentStore.pageNum"
            v-model:pageSize="processDeploymentComponentStore.pageSize"
            :total="processDeploymentComponentStore.totalRow"
            @page-change="processDeploymentComponentStore.queryTableDataList()">
        </vxe-pager>
    </PageView>
</template>

<script setup lang="ts">
import PageView from '@/views/layout/PageView.vue';
import { useProcessDeploymentComponentStore } from '@/store/UseProcessDeploymentComponentStore.ts';
import { onMounted, ref } from 'vue';
import type { VxeTableInstance, VxeToolbarInstance } from 'vxe-table';
import MessageUtils from '@/utils/MessageUtils.ts';

const processDeploymentComponentStore = useProcessDeploymentComponentStore();
const toolbarRef = ref<VxeToolbarInstance>();
const tableRef = ref<VxeTableInstance>();

onMounted(() => {
    // 如果使用表格工具栏的内置功能，需要先关联表格，通过调用 connect() 方法与表格进行关联，就可以开启相关的功能
    const $table = tableRef.value;
    const $toolbar = toolbarRef.value;
    if ($table && $toolbar) {
        $table.connect($toolbar);
    }

    // 查询表格数据
    processDeploymentComponentStore.tableLoading = true;
    processDeploymentComponentStore.queryTableDataList().catch((reason) => {
        MessageUtils.showErrorMessage(reason.message);
    }).finally(() => {
        processDeploymentComponentStore.tableLoading = false;
    });
})

// 重置表单数据
const resetFormData = () => {

};
</script>

<style scoped lang="scss">

</style>
